
<!--供应商-->
<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
      <el-form-item label="供应商名称" prop="providerName">
        <el-input
            v-model="queryParams.data.providerName"
            placeholder="请输入供应商名称"
            clearable
            size="small"
            style="width:180px"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input
            v-model="queryParams.data.contactName"
            placeholder="请输入联系人"
            clearable
            size="small"
            style="width:180px"/>
      </el-form-item>
      <el-form-item label="供应商电话" prop="contactTel">
        <el-input
            v-model="queryParams.data.contactTel"
            placeholder="请输入供应商电话"
            clearable
            size="small"
            style="width:180px"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryParams.data.status"
            placeholder="可用状态"
            clearable
            size="small"
            style="width:180px"
        >
          <el-option
              v-for="status in statusOptions"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="showAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 供应商查询条件结束 -->


<!--  供应商表格-->
    <el-table
        :data="goods"
        border
        size="small"
        :header-cell-style="{textAlign: 'center',fontSize:'14px'}"
        :cell-style="{ textAlign: 'center',fontSize:'14px' }">
      <el-table-column
          prop="providerId"
          label="供应商id"
          fixed="left">
      </el-table-column>
      <el-table-column
          prop="providerName"
          label="供应商名称"
          min-width="120"
          fixed="left">
      </el-table-column>
      <el-table-column label="联系人" align="center" prop="contactName" />
      <el-table-column label="联系人手机" align="center" prop="contactMobile" />
      <el-table-column label="供应商电话" align="center" prop="contactTel" />
      <el-table-column label="银行账号" width="200" align="center" prop="bankAccount" />
      <el-table-column label="供应商地址" align="center" prop="providerAddress" />
      <el-table-column
          prop="status"
          min-width="120"
          fixed="right"
          label="状态">
        <template v-slot="{row}">
          <div v-for="item in statusOptions" :key="item.dictValue" :disabled="row.status===1">
                        <span v-if="item.dictValue === row.status">
                            {{item.dictLabel}}
                        </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180" align="center" prop="createTime" />
      <el-table-column
          label="操作"
          min-width="120"
      >
        <template v-slot="{row}">
          <el-button type="primary" size="small"
                     @click="showEdit(row)">
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="deleteE(row)" :disabled="row.rid===1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--分页  -->
    <el-pagination
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />



    <!--  添加编辑-->

    <el-dialog title="添加供应商信息" @close="employeeData = {}" :visible.sync="dialogFormVisible">
      <el-form ref="employeeData" :model="employeeData" label-width="80px" :rules="rules">
        <el-form-item label="供应商名称" prop="providerName">
          <el-input v-model="employeeData.providerName" name="providerName"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model.number="employeeData.contactName" name="contactName"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="contactMobile">
          <el-input v-model.number="employeeData.contactMobile" name="contactMobile"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="contactTel">
          <el-input v-model.number="employeeData.contactTel" name="contactTel"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankAccount">
          <el-input v-model="employeeData.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="providerAddress">
          <el-input v-model="employeeData.providerAddress"></el-input>
        </el-form-item>
        <el-form-item label="状态" >
          <el-select v-model="employeeData.status" placeholder="状态">
            <el-option v-for="status in statusOptions"
                       :label="status.dictLabel"
                       :value="status.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSubmit('employeeData')" >{{employeeData.id ? '修改' : '保存'}}</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>


</template>

<script>
export default {
  data(){
    return{
      // 状态
      statusOptions:[],
      // 表格
      goods:[],
      // 校验
      rules: {
        providerName: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactMobile: [
          { required: true, message: '手机不能为空', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        bankAccount: [
          { required: true, message: '银行账号不能为空', trigger: 'blur' }
        ]
      },
      // 编辑添加表单
      employeeData: {},
      dialogFormVisible:false,

      // 查询条件
      queryParams: {
        pageNo:undefined,
        //每页的大小
        pageSize:undefined,
        data:{},
        // providerName: undefined,
        // contactName: undefined,
        // contactTel: undefined,
        // status: undefined
      },
      pageNo:1,
      //每页的大小
      pageSize:5,
      total:0,

      queryForm:[]
    }
  },
  created() {
    this.loadTable()
    //查询状态
    this.$http.get("/stockRemoteDictData/queryByDictType?dictType="+'sys_normal_disable').then(result=>{
       // console.log(result)
      this.statusOptions=result.data;
    })
  },

  methods: {
    // 刷新
    handleQuery() {
      this.loadTable();
    },
    // 重置
    resetQuery() {
      //页面刷新
      location.reload();
    },

    //   编辑  数据回显
    showEdit(row){
      return this.$http.get("/provider/queryById?id=" + row.providerId).then(result => {
        // console.log(result.data)
        this.employeeData = result.data.data;
        this.employeeData.rid = Number(this.employeeData.rid);
        this.dialogFormVisible = true;
      })
    },


    // 删除
    deleteE(row){
      this.$http.delete("/provider/deleteById?id=" + row.providerId).then(result=>{
        if (result.data!= null) {
          this.$notify({
            title: '成功',
            message: "删除成功",
            type: 'success'
          });
          this.loadTable();
        } else {
          this.$notify.error({
            title: '错误',
            message: "删除失败",
          });
        }
      })
    },

    // 添加
    showAdd(){
      this.dialogFormVisible=true;
    },


    // 确认修改和保存
    // 保存提交
    async saveSubmit(formName) {
      try {
        await this.$refs[formName].validate();
        console.log(this.employeeData)
        const empData = await this.$http.post("/provider/addAndUpdate",this.employeeData);
        await this.loadTable();
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
      } catch (error) {
        this.$message.error("操作失败：" + error.message);
      }
    },


  //   查询所有
    loadTable(){
      this.queryParams.pageNo = this.pageNo;
      this.queryParams.pageSize = this.pageSize;
      // console.log(this.queryParams)
      this.$http.post("/provider/queryByPage",this.queryParams).then(res=>{
        // console.log(res+"~~~~~~~~~~~~~~~~~~~~~~~");
        // console.log(res.data)
        this.goods=res.data.data.list;
        this.total=res.data.data.total;

      })
    },


    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新查询
      this.loadTable();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.pageNo= val;
      // 重新查询
      this.loadTable();
    },

  }
  }

</script>

<style scoped>

</style>